<template>
  <view class="address-container">
    <!-- 搜索栏 -->
    <view class="search-section">
      <view class="search-bar">
        <text class="search-icon">🔍</text>
        <input class="search-input" placeholder="搜索小区/写字楼/学校等" />
      </view>
    </view>

    <!-- 已选送至地址 -->
    <view class="selected-address" @click="editSelectedAddress">
      <view class="selected-content">
        <view class="selected-label">已选送至:</view>
        <view class="selected-text">黄浦区上海市人民政府(人民大道北)</view>
        <view class="selected-action">
          <text class="action-text">完善</text>
          <text class="arrow">></text>
        </view>
      </view>
    </view>

    <!-- 我的收货地址 -->
    <view class="address-section">
      <view class="section-header">
        <text class="section-title">我的收货地址</text>
        <text class="add-address" @click="addNewAddress">新增地址</text>
      </view>
      <view class="no-address" v-if="!hasAddress">
        <text class="no-address-text">暂无收货地址</text>
      </view>
      <view class="address-list" v-else>
        <!-- 地址列表项 -->
      </view>
    </view>

    <!-- 附近地址 -->
    <view class="nearby-section">
      <view class="section-header">
        <text class="section-title">附近地址</text>
      </view>
      <view class="location-error">
        <view class="error-content">
          <text class="error-icon">⚠️</text>
          <text class="error-text">未获取到定位</text>
          <view class="relocate-btn" @click="relocate">
            <text class="relocate-icon">📍</text>
            <text class="relocate-text">重新定位</text>
          </view>
        </view>
        <text class="error-suggestion">请检查系统和微信定位是否开启</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hasAddress: false, // 是否有收货地址
      selectedAddress: '黄浦区上海市人民政府(人民大道北)',
      searchKeyword: ''
    }
  },
  methods: {
    // 编辑已选地址
    editSelectedAddress() {
      uni.showToast({
        title: '编辑地址功能',
        icon: 'none'
      });
    },
    // 新增地址
    addNewAddress() {
      uni.showToast({
        title: '新增地址功能',
        icon: 'none'
      });
    },
    // 重新定位
    relocate() {
      uni.showToast({
        title: '重新定位中...',
        icon: 'loading'
      });
      // 这里可以调用定位API
      setTimeout(() => {
        uni.showToast({
          title: '定位成功',
          icon: 'success'
        });
      }, 2000);
    }
  }
}
</script>

<style scoped>
.address-container {
  background: #f7f7f7;
  min-height: 100vh;
  padding-bottom: 20px;
}

/* 搜索栏 */
.search-section {
  background: #fff;
  padding: 16px 12px;
  border-bottom: 1px solid #f0f0f0;
}

.search-bar {
  display: flex;
  align-items: center;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 8px 16px;
}

.search-icon {
  font-size: 16px;
  color: #999;
  margin-right: 8px;
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  color: #333;
}

/* 已选送至地址 */
.selected-address {
  background: #fff7e6;
  margin: 12px;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #ffd591;
}

.selected-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.selected-label {
  font-size: 14px;
  color: #d46b08;
  font-weight: bold;
  margin-right: 8px;
}

.selected-text {
  flex: 1;
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

.selected-action {
  display: flex;
  align-items: center;
  color: #ff6700;
}

.action-text {
  font-size: 14px;
  margin-right: 4px;
}

.arrow {
  font-size: 16px;
  font-weight: bold;
}

/* 地址区域 */
.address-section, .nearby-section {
  background: #fff;
  margin: 12px;
  border-radius: 12px;
  padding: 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.add-address {
  color: #ff4d4f;
  font-size: 14px;
  font-weight: 500;
}

/* 暂无地址 */
.no-address {
  text-align: center;
  padding: 40px 0;
}

.no-address-text {
  color: #999;
  font-size: 14px;
}

/* 定位错误 */
.location-error {
  padding: 20px 0;
}

.error-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.error-icon {
  font-size: 18px;
  margin-right: 8px;
}

.error-text {
  flex: 1;
  color: #ff4d4f;
  font-size: 15px;
  font-weight: 500;
}

.relocate-btn {
  display: flex;
  align-items: center;
  color: #ff4d4f;
}

.relocate-icon {
  font-size: 16px;
  margin-right: 4px;
}

.relocate-text {
  font-size: 14px;
  font-weight: 500;
}

.error-suggestion {
  color: #999;
  font-size: 12px;
  margin-left: 26px;
}
</style> 